<template>
  <div>
    <div class="Carousel">
      <div class="block">
        <el-carousel height="25rem">
          <el-carousel-item v-for="(item, id) in imgs" :key="id">
            <img :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
        <!-- <div class="ad-text">
          <div v-for="(item, id) in ad" :key="id" class="ad">
            <span>{{ item.name }}</span
            ><br />
            <span>{{ item.text }}</span>
          </div>
        </div> -->
      </div>
    </div>
    <div>
      <div class="bg000">
        <div class="shop-all">
          <el-tabs v-model="activeName" @tab-click="classifyconts($event)">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane
              v-for="(item, id) in classifys"
              :key="id"
              :label="item"
            ></el-tab-pane>
            <el-row :gutter="10">
              <div class="classify-all">
                <router-link to="/details">
                  <div @click="jump($event)">
                    <el-col
                      :xs="24"
                      :sm="11"
                      :md="11"
                      :lg="7"
                      :xl="5"
                      v-for="(item, id) in shopclassify"
                      :key="id"
                      class="shops"
                      style="padding-left: 0px; padding-right: 0px"
                      :id="item.shopid"
                    >
                      <div class="shops-img">
                        <img
                          :src="
                            'http://114.132.236.89:8888/static/' + item.minphoto
                          "
                          alt=""
                        />
                      </div>
                      <div class="shops-content">
                        <div class="shops-description">
                          <span>{{ item.desc }}</span>
                        </div>
                        <div class="shops-name">
                          <span>{{ item.shopname }}</span>
                        </div>
                        <div class="shops-price">
                          <span>￥{{ item.price }}</span>
                        </div>
                      </div></el-col
                    >
                  </div>
                </router-link>
              </div>
            </el-row>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        "https://s1.ax1x.com/2022/05/31/X8B5vD.jpg",
        "https://s1.ax1x.com/2022/05/31/X8BYHs.png",
      ],
      // imgs: [require("../imgs/10488.jpg"), require("../imgs/10492.jpg")],
      // ad: [
      //   { name: "广告1", text: "广告内容1" },
      //   { name: "广告2", text: "广告内容2" },
      //   { name: "广告3", text: "广告内容3" },
      //   { name: "广告4", text: "广告内容4" },
      //   { name: "广告5", text: "广告内容5" },
      // ],
      activeName: "first",
      username: "",
      password: "",
      classifys: [],
      //商品列表
      shopclassify: [],
    };
  },
  mounted() {
    this.classify();
    this.indexonec();
  },
  methods: {
    //拿到所有商品分类
    classify() {
      this.$axios
        .get("/tClassify/search", {
          params: {
            classifyid: "",
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            for (var i = 0; i < res.data.data.length; i++) {
              this.classifys.push(res.data.data[i].classifyname);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    classifyconts(e) {
      if (e.index == 0) {
        this.indexonec();
        return;
      }
      var id = e.index - 0 + 1;
      this.$axios
        .get("/tShop/selectbyclassid", {
          params: {
            classifyid: id,
          },
        })
        .then((res) => {
          this.shopclassify = [];
          for (var i = 0; i < res.data.data.length; i++) {
            this.shopclassify.push(res.data.data[i]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //刚进来时展示所有商品
    indexonec() {
      this.$axios
        .get("/tShop/selectall", {})
        .then((res) => {
          this.shopclassify = [];
          for (var i = 0; i < res.data.data.length; i++) {
            this.shopclassify.push(res.data.data[i]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    jump(e) {
      //把点击的商品id存在vuex里
      this.$store.state.shopid = e.path[2].id;
    },
  },
};
</script>
<style scoped>
@import url("../css/index.css");
</style>
